<template>
	<!-- template只能是一个根标签,  只能是一个script,
	 style 可以是多个或者没有
	 -->
	<view class="content" hover-class="hclass" >
		<!-- uniapp 用的组件,都是小程序的组件, view text image 
		view 是可以嵌套使用的 类似于div,p,布局使用的 
		-->
		<view>
			我是index页面
		</view>
		<view>
			块元素,自己独占一行,可以有宽高
		</view>
		<!-- uniapp selectable 长按出来复制按钮,微信小程序不可以出现复制
		微信小城 view   才可以出现
		-->
		<text selectable>行内元素,和span标签类似,没有宽高</text>
		<!-- 解码特殊符号,&lt; 能够转化,无法运行 -->
		<text decode >在一行&copy; </text>
		<!-- 手指触摸时候 显示的  和view:hover 效果类似 hover-class 会自动的会返回原样式 
		hover-stay-time 效果持续的时间.小程序同样适用
		hover-stop-propagation 阻止冒泡的事件类似,只是本身效果改变,父类的效果不变
		-->
		<view hover-class="hclass" hover-stop-propagation  :hover-start-time='2000' :hover-stay-time='3000'>
			默认黑色
		</view>
		<!-- 大按钮,沾满整个屏幕,白底黑字 size 默认default 按钮   -->
		<button type="default" size="mini" plain>我是按钮</button>
		<!-- 主按钮,一个页面里边,只有一个主按钮,登录,提交,
		属性 boolean 只要写上属性,默认是true plain,绿色边框,绿字 -->
		<button type="primary"  plain >绿底白字</button>
		<!-- loading 点击按钮,获取后台数据,提交form表单, -->
		<button type="warn" :loading='false' >红底白字</button>
		<!-- 默认所有的图片是同样的大小,300px,240px,以前是225px 
		还可以网络的,http,
		绝对路径也可以
		-->
		<image src="../../static/images/link-01.png" ></image>
		<image src="@/static/images/link-01.png" ></image>
		<!-- 375/249 -->
		<!-- scaleToFill 不保持比例,填满屏幕
		 aspectFit 保持比例,宽/高,多的一方满足条件不在动了
		 aspectFill 保持比例,宽/高,小的一方满足条件不在动了
		 heightFix 高度不变，宽度自动变化，保持原图宽高比不变,
		 widthFix宽度不变，高度自动变化，保持原图宽高比不变
		 -->
		<image mode='heightFix' src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg" ></image>
		<!-- 有:这个是data,计算属性,需要渲染 -->
		<form @submit="" @reset="">	
			<input type="text" :value="title" />
			<input type="password" value="密码" />
			性别
			<!-- @change 当选择其中某一个数,触发的是onchange方法 -->
			<radio-group name="radio" @change="">
				<label>
					<radio value="男" :checked="'男' === radio" /><text>男</text>
					<radio value="女" /><text>女</text>
				</label>
			</radio-group>
			<checkbox-group name="">
				<label>
					<checkbox value="未婚" /><text>未婚</text>
				</label>
				<label>
					<checkbox value="离婚" /><text>离婚</text>
				</label>
			</checkbox-group>
			
			<!-- form-type 触发提交或者是重置的方法	 -->
			<button form-type="submit">Submit</button>
			<button form-type="reset">Reset</button>
		</form>
		<!-- 富文本,可以渲染出html标签的效果, -->
		<rich-text nodes="<h1>我是h1标签</h1>" ></rich-text>
		<!-- 可以嵌套标签,对渲染的标签有限制.H5 新加的标签,慎用,无法渲染成功 -->
		<rich-text :nodes="mynode" ></rich-text>
		<!-- <rich-text nodes="<h1>&lt;&nbsp;&gt;&copy; </h1>" ></rich-text> -->
		<!-- 特殊的符号,在data可以渲染成功, 直接字符串,无法成功,只能部分成功 
		 小程序,字符串也可以渲染特殊符号
		 -->
		 <rich-text :nodes="mynode2" ></rich-text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				radio:"男",
				checkbox:[],
				mynode:`
				<div >
					自己的div
					&lt;&nbsp;&gt;&copy; 
					<p>我还是嵌套</p>
				</div>
				`,
				mynode2:[{
					name:'div',						
					attrs:{
						class:"myclass",
						style:"color:red"
					},
					children:[{
						type:"text",
						text:'自己的div'
					},{
						name:'p',
						children:[{
							type:"text",
							text:'我还是嵌套'
						}]
					}]
				}]
			}
		},
		onLoad(option) {
			console.log(option)
			// const op = uni.getLaunchOptionsSync();
			// console.log(op)
		},
		methods: {

		}
	}
</script>
<style>
	/* 硬件的错误无法规避,项目名字用的汉字, */
	/* 
	.content {
		color: #4CD964;
	} */
		
	.hclass{
		color:#4CD964;
		
	}
		
	/* view:hover{
		font-size: 40px
	} */
</style>
